<template>
  <div>
    <CategoryHeadVue them="设置"></CategoryHeadVue>
    <van-cell-group>
    <van-cell title="绑定用户名" :value="usermsg"  @click = "username" />
    <van-cell title="修改密码"   @click = "password"/>
    <van-dialog v-model="show"  confirm-button-color="red" class="username" :close-on-click-overlay="true" @confirm="usersign">
       <p class="setname">设置用户名</p>
       <van-cell-group>
        <van-field v-model="value1"  placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>

    <van-dialog v-model="xianshi"  confirm-button-color="red" class="password" :close-on-click-overlay="true" @confirm="usernewword">
       <p class="setname">更新密码</p>
       <van-cell-group>
        <van-field v-model="value2"  placeholder="原始密码" />
      </van-cell-group>
       <van-cell-group>
        <van-field v-model="value3"  placeholder="新密码" />
      </van-cell-group>
    </van-dialog>
    </van-cell-group>
    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" class="exit" @click="exit()">
        退出登录
    </van-button>
  </div>
</template>

<script>
// import { Dialog } from 'vant';
import CategoryHeadVue from '@/components/Category-head.vue';
import axios from 'axios';
import { Toast } from 'vant';
export default {
    name:"ser-vue",
    data(){
        return {
            show:false,
            msg:"",
            xianshi:false,
            value1:'',
            value2:'',
            value3:'',
            usermsg:""
        }
    },
    components:{
        CategoryHeadVue
    },
    methods:{
     username(){
        if(this.usermsg){
            Toast("亲,用户名只能更改一次哦！")
        }
    },
   password(){
            this.xianshi = true
        },
   exit(){
        localStorage.removeItem("token")
        localStorage.removeItem("userid")
        localStorage.removeItem("username")
        localStorage.removeItem("loginState")
        this.$router.replace("/reg")
    },
    usersign(){
        //发送请求
        axios.get("/api/user/info",{
            params:{
                userid:localStorage.getItem("userid")
            }
        })
        .then(res=>{
            if(res.data.code==200){
             console.log(res.data.data.username);
            }
        })
        axios.get("/api/user/bindusername",{
            params:{
                userid:localStorage.getItem("userid"),
                username:this.value1
            }
        })
        .then(res=>{
            if(res.data.code==200){
                this.usermsg = this.value1
            }
        })
    },
    usernewword(){
        axios.get("/api/user/updatePassword",{
            params:{
                userid:localStorage.getItem("userid"),
                oldpassword:this.value2,
                newpassword:this.value3
            }
        })
        .then(res=>{
            if(res.data.code=="10030"){
                console.log("原始密码错误");
                return;
            }else{
                localStorage.removeItem("token")
                localStorage.removeItem("userid")
                localStorage.removeItem("username")
                localStorage.removeItem("loginState")
                this.$router.replace("/reg")
            }
            
        })
    },
    
    },
    created(){
        axios.get("/api/user/info",{
        params:{userid:localStorage.getItem("userid")}
        })
        .then(res=>{
        if(res.data.code == 200){
            if(res.data.data[0].username){
           this.show = false;
           this.usermsg = res.data.data[0].username
            }else{
             this.show = true;
            }
         }
        })
    }
    
}
</script>

<style scoped>
.exit{
    width:100%;
    margin-top: 1rem;
    border-radius:1rem;
}
.username{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 7.5rem;
}
.password{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 10rem;
}
.setname{
    /* margin: 0 auto; */
    width: 100%;
    text-align: center;
    padding-top: .5rem;
    font-weight: 700;
    font-size: 1.25rem;
}
</style>